<template>
  <div class="view-fill">
    <div class="app-container-flex" v-show="!showModify.visible">
      <NewFullScreen
        v-model="showDialog"
        title="巡检路线详情"
        :btn-list="fullInfo.btnList"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button v-if="$permission('patrolRoute:edit')" @click="update"
            >编辑</el-button
          >
        </template>
        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <div class="model-panel-body">
              <basic-information :info="infoList">
                <template v-slot:basic-referenceRange>
                  <p>
                    {{ infoList.data.referenceRangeStart }}-{{
                      infoList.data.referenceRangeEnd
                    }}
                  </p>
                </template>
              </basic-information>
            </div>
          </div>
        </div>

        <div class="model-panel model-panel-right">
          <div class="model-panel-body">
            <div class="flex_full_item">
              <el-tabs v-model="clickName" @tab-click="handleTabClick">
                <el-tab-pane
                  class="model-panel-title"
                  label="基本信息"
                  name="first"
                >
                  <basic-information :info="basicInfoList"></basic-information>
                </el-tab-pane>
                <el-tab-pane
                  class="model-panel-title"
                  label="操作流水"
                  name="second"
                >
                  <Timeline :list="affairTableInfo.data" />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <order-modify
      v-if="showModify.visible"
      v-model:visible="showModify.visible"
      :id="id"
      :type="showModify.type"
      :title="showModify.title"
      @returnBack="modifyCallback"
    />
  </div>
</template>

<script setup name="patrolRouteDetail">
import { getPatrolRouteById } from '@/api/core'
import { orderOpAffairAll } from '@/api/affair'
import OrderModify from './modify'

const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps(['visible', 'id', 'pageType'])

const showModify = ref({
  title: '修改巡检路线',
  type: 'update',
  visible: false,
})
const activeName = ref('first')
const clickName = ref('first')
const basicInfoList = ref({
  data: [],
  fieldList: [
    {
      label: '名称',
      value: 'routeName',
      type: 'text',
    },
    {
      label: '负责人',
      value: 'routeResponseUserName',
      type: 'text',
    },
    {
      label: '联系电话',
      value: 'contactsPhone',
      type: 'text',
    },
    {
      label: '描述',
      value: 'description',
      type: 'text',
    },
    {
      label: '创建人',
      value: 'createUserName',
      type: 'text',
    },
    {
      label: '创建时间',
      value: 'createTime',
      type: 'text',
    },
    {
      label: '最后更新人',
      value: 'updateUserName',
      type: 'text',
    },
    {
      label: '最后更新时间',
      value: 'updateTime',
      type: 'text',
    },
  ],
})
const infoList = ref({
  data: {},
  fieldList: [
    { label: '名称', value: 'routeName', type: 'text' },
    { label: '负责人', value: 'routeResponseUserName', type: 'text' },
    { label: '联系电话', value: 'contactsPhone', type: 'text' },
    { label: '项目描述', value: 'description', type: 'text' },
  ],
})
const fullInfo = ref({
  btnList: [],
})
// 操作流水
const affairTableInfo = ref({
  data: [],
  query: {
    orderType: 57,
    orderId: props.id,
    sort: 'operate_time desc',
  },
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  getMain()
})

function modifyCallback() {
  getMain()
}
function update() {
  showModify.value.visible = true
}
function handleTabClick(tab) {
  const name = tab.paneName
  if (name == 'first') {
    getMain()
  } else if (name == 'second') {
    getAffairList()
  }
}
function returnBack() {
  emits('returnBack')
}
function getAffairList() {
  orderOpAffairAll(affairTableInfo.value.query).then((resp) => {
    if (resp && resp.success) {
      affairTableInfo.value.data = resp.data
    }
  })
}
function getMain() {
  getPatrolRouteById(props.id).then((resp) => {
    if (resp && resp.success) {
      infoList.value.data = resp.data
      basicInfoList.value.data = resp.data
      if (!resp.data) {
        showDialog.value = false
        emits('returnBack')
      }
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.el-tabs) .el-tabs__header {
  padding: 0 2px !important;
  box-sizing: border-box;
}

:deep(.el-tabs) .el-tabs__nav-wrap::after {
  height: 1px !important;
}
.model-panel-left {
  width: 73%;
  float: left;
  margin-right: 10px;
}
.model-panel-right {
  width: 25%;
}
</style>
